<script>
import tooltipCover from "./tooltipCover.vue";
import tooltipText from "./tooltipText.vue";
export default {
  name: "Tooltip",
  components: {
    tooltipCover,
    tooltipText,
  },
  inject: ["father"],
  data() {
    return {
      activeName: "1",
      options: [
        {
          title: "提示框浮层",
          name: "2",
          render: () => <tooltipCover />,
        },
        {
          title: "提示框文本",
          name: "3",
          render: () => <tooltipText />,
        },
      ],
    };
  },
  computed: {
    tooltip: {
      get() {
        return this.father.echartsOptions.tooltip;
      },
      set(val) {
        this.father.echartsOptions.tooltip = val;
      },
    },
  },
  mounted() {},
  methods: {},
  render() {
    return (
      <div>
        <el-form-item label="显示">
          <el-switch v-model={this.tooltip.show}></el-switch>
        </el-form-item>
        <el-collapse v-model={this.activeName} accordion>
          {this.options.map((item) => {
            return (
              <el-collapse-item title={item.title} name={item.name}>
                {item.render()}
              </el-collapse-item>
            );
          })}
        </el-collapse>
      </div>
    );
  },
};
</script>

<style scoped>
</style>